<template>
  <div>
    <a-modal
      :title="title"
      :width="1200"
      :bodyStyle="{
        padding: '0 24px'
      }"
      :visible="visible"
      @cancel="handleCancel"
      >

      <a-card :bordered="false">
          <!-- 查询区域 -->
          <div style="display: flex;align-item: center;margin-bottom: 15px">
              <span style="line-height: 32px">申请部门：</span>
              <j-select-depart placeholder="请选择申请部门" :style="{width:'150px'}" v-model="queryParam.proposerDeptId" :multi="true" />
              <span style="margin-left: 20px;line-height: 32px">费用所属团队：</span>
              <select-team-input placeholder="请选择团队" :style="{width:'150px'}" v-model="queryParam.teamId" :teamType="0" :tdlx="3" :multi="true" />
              <div style="display: inline-block;margin-left: 20px">
                <a-button @click="searchQuery" type="primary" icon="search">查询</a-button>
                <a-button @click="searchResetLoad" style="margin-left: 20px" icon="redo">重置</a-button>
              </div>
          </div>
        <!-- 查询区域-END -->

        <!-- table区域-begin -->
        <div>
          <a-table
            ref="table"
            size="middle"
            :scroll="{x:true}"
            rowKey="billIds"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"
            :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
            class="j-table-force-nowrap"
            wrapClassName="ant-modal-cust-warp"
            @change="handleTableChange">
            <template slot="provision" slot-scope="text,record">
              <span>{{record.provisionBroad_dictText + '-' + record.provisionSmall_dictText}}</span>
            </template>
            <span slot="action" slot-scope="text, record">
              <a @click="onDetail(record)">详情</a>
            </span>
          </a-table>
        </div>
      </a-card>

      <template slot="footer">
        <a-button @click.stop="()=>{visible=false}">关闭</a-button>
      </template>
    </a-modal>

    <!-- 详情开始 -->
    <a-modal
      :maskClosable="false"
      title="采购申请单据详情"
      :width="1350"
      :bodyStyle="{
        padding: '0 24px'
      }"
      :visible="visibleDetail"
      @cancel="handleCancelDetail"
      cancelText="关闭">
      <erp-purchase-apply-form-form ref="applyForm" :disabled="true" normal></erp-purchase-apply-form-form>
      <a-row type="flex" justify="center">
        <a-col :span="24">
          <common-flow-list v-if="model.bpmStatus !== '1'" :formData="formData"></common-flow-list>
        </a-col>
      </a-row>
      <template slot="footer">
        <a-button @click.stop="handleCancelDetail">关闭</a-button>
      </template>
    </a-modal>
    <!-- 详情结束 -->
  </div>
</template>

<script>

  import '@/assets/less/TableExpand.less'
  import { mixinDevice } from '@/utils/mixin'
  import { getAction } from '@/api/manage'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import {DisabledAuthFilterMixin} from '@/mixins/DisabledAuthFilterMixin'
  import SelectTeamInput from '@/views/scy/components/SelectTeamInput'
  import ErpPurchaseApplyFormForm from '@/views/erp/purchase/procurement/modules/ErpPurchaseApplyFormForm'
  import CommonFlowList from '@/views/components/CommonFlowList.vue'; // 审批历史流程列表组件
  export default {
    name: 'ErpPurchaseChecklistList',
    mixins:[JeecgListMixin, mixinDevice, DisabledAuthFilterMixin],
    components: {
      SelectTeamInput,
      ErpPurchaseApplyFormForm,
      CommonFlowList
    },
    watch:{
      'billIds'(val){
        this.dataSource = []
        this.ipagination.total = 0
        if (!val) return
        this.queryParam.billIds = this.billIds;
        this.loadData()
      }
    },
    data () {
      return {
        description: '采购清单明细页面',
        title: '采购清单明细',
        //表头
        columns:[],
        //列设置
        settingColumns:[],
        // 列定义
        defColumns: [
          {
            title: '序号',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title:'申请人',
            align:"center",
            dataIndex: 'proposer_dictText',
          },
          {
            title:'申请部门',
            align:"center",
            dataIndex: 'proposerDeptId_dictText',
          },
          {
            title:'费用所属团队',
            align:"center",
            dataIndex: 'teamId_dictText',
          },
          {
            title:'采购类别',
            align:"center",
            dataIndex: 'provision',
            scopedSlots: { customRender: 'provision' },
          },
          {
            title:'物料名称',
            align:"center",
            dataIndex: 'materialName_dictText',
          },
          {
            title:'品牌',
            align:"center",
            dataIndex: 'brand',
          },
          {
            title:'规格型号',
            align:"center",
            dataIndex: 'specification',
          },
          {
            title:'数量',
            align:"center",
            dataIndex: 'amount',
          },
          {
            title:'单位',
            align:"center",
            dataIndex: 'unit_dictText',
          },
          {
            title:'参考价格',
            align:"center",
            dataIndex: 'referencePrice',
          },
          {
            title:'预算价格',
            align:"center",
            dataIndex: 'budgetAmount',
          },
          {
            title: '操作',
            dataIndex: 'action',
            align:"center",
            fixed:"right",
            width:100,
            scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'action' }
          }
        ],
        url: {
          queryById: '/api/erp/purchase/procurement/erpPurchaseApplyForm/queryById',
          list: '/api/erp/purchase/procurement/erpPurchaseChecklist/queryByPurchaseApplyFormDetailIds',
          getBizHisProcessNodeInfo: '/api/erpmng/act/process/extActProcessNode/getBizHisProcessNodeInfo'
        },
        // 代码生成后需手动设置流程编码
        flowCode: 'dev_erp_purchase_apply_form_001',
        model: {},
        formData: {},
        dictOptions: {},
        superFieldList: [],
        billIds: null,
        visible: false,
        visibleDetail: false
      }
    },
    created() {
      this.getSuperFieldList();
    },
    methods: {
      searchResetLoad() {
        this.queryParam.proposerDeptId = null
        this.queryParam.teamId = null
        this.loadData()
      },
      handleCancel() {
        this.visible = false;
      },
      initDictConfig(){
      },
      getSuperFieldList(){
        let fieldList=[];
        fieldList.push({type:'string',value:'provisionBroad',text:'大类名称',dictCode:''})
        fieldList.push({type:'string',value:'provisionSmall',text:'小类名称',dictCode:''})
        fieldList.push({type:'string',value:'materialName',text:'物料名称',dictCode:''})
        fieldList.push({type:'string',value:'specification',text:'规格型号',dictCode:''})
        fieldList.push({type:'int',value:'amount',text:'数量',dictCode:''})
        fieldList.push({type:'string',value:'unit',text:'单位',dictCode:''})
        fieldList.push({type:'date',value:'disposeTime',text:'处理日期'})
        fieldList.push({type:'string',value:'purchaseStatus',text:'采购状态',dictCode:''})
        this.superFieldList = fieldList
      },
      onDetail(record) {
        this.visible = false
        this.visibleDetail = true
        this.$nextTick(() => {
          const id = record.parentId;
          getAction(this.url.queryById, { id }).then((res) => {
            if (res.success) {
              // 查询流程
            let params = { flowCode: this.flowCode, dataId: res.result.id };// 查询条件
            this.viewTrack(params);
              const model = res.result
              this.model = res.result
              this.$refs.applyForm.edit(model);
            }
          })
        });
      },
      // hanyu 查看页面看工作流记录
      viewTrack(params) {
        getAction(this.url.getBizHisProcessNodeInfo, params).then((res) => {
          if (res.success) {
            var data = {
              dataId: res.result.dataId,
              procInsId: res.result.procInsId,
              tableName: res.result.tableName,
              vars: res.result.records
            }
            this.formData = data;
            // this.path = res.result.formUrl;
            // if (this.$refs.bizHisTask) {
            //   this.$refs.bizHisTask.getHisProcessTaskTransInfo(this.formData);
            // }
          }
        })
      },
      handleCancelDetail() {
        this.visible = true
        this.visibleDetail = false
      }
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
  .ant-card-body .table-operator {
    margin-bottom: 18px;
  }

  .ant-table-tbody .ant-table-row td {
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .anty-row-operator button {
    margin: 0 5px
  }

  .ant-btn-danger {
    background-color: #ffffff
  }

  .ant-modal-cust-warp {
    height: 100%
  }

  .ant-modal-cust-warp .ant-modal-body {
    height: calc(100% - 110px) !important;
    overflow-y: auto
  }

  .ant-modal-cust-warp .ant-modal-content {
    height: 90% !important;
    overflow-y: hidden
  }

  .anty-img-wrap {
    height: 25px;
    position: relative;
  }

  .anty-img-wrap > img {
    max-height: 100%;
  }
</style>
